<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #div1 {
        background-color: red;
        color: #fff;
        width: 500px;
        height: 500px;
    }

    #div2 {
        color: #fff;
        background-color: blue;
        width: 100px;
        height: 100px;
    }
</style>

<body>
    <div id="div1">
        父节点
        <div id="div2">
            子节点
        </div>
    </div>
    <a href="http://www.baidudu.com">百度一下</a>
    <script>
        var div2 = document.querySelector("#div2")
        var a = document.querySelector("a")
        a.onclick = function (e) {
            console.log(222)
            e.preventDefault();
        }
        div2.onclick = function (e) {
            console.log(e.target)
            alert("子节点");
            // 阻止事件冒泡
            e.stopPropagation();
        }
        var div1 = document.querySelector("#div1")
        div1.onclick = function (e) {
            alert("父节点");
        }
        // var body = document.querySelector("body")
        // body.onclick = function () {
        //     alert("body");
        // }
    </script>
</body>

</html>